<template>
    <div class="leftModule">
        <div class="title">
            <!-- <div class="blueItem"></div> -->
            <!-- 插槽 标题参数 -->
            <slot name="title"></slot>
        </div>
        <div class="tree">
            <el-input size="mini" placeholder="来源名称或类型" v-model="filterText">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-tree
                ref="tree"
                node-key="id"
                class="filter-tree"
                :data="dataSource"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :highlight-current="true"
                :expand-on-click-node="false"
                :default-expanded-keys="expandedKey"
                :current-node-key="currentNodekey"
                @node-click="handleNodeClick"
                @node-expand="handleNodeExpand"
                @node-collapse="handleNodeCollapse"
            >
                <span class="custom-tree-node" slot-scope="{ data }" :style="setStyle(data.level)">
                    <span class="label">
                        <!-- 插槽 标题参数 -->
                        <slot name="treeIcon"></slot>
                        <span class="node-name">{{ data.label }}</span>
                    </span>

                    <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-edit"
                        style="color: black"
                        v-if="data.parentId == 3"
                        @click.stop="clickIconEdit(data)"
                    ></el-button>
                    <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-edit-outline"
                        style="color: black; right: 25px; top: 5px; position: absolute"
                        v-if="data.level == 4"
                        @click.stop="clickIconEditOutline(data)"
                    ></el-button>
                    <!-- 添加节点 -->
                    <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-plus"
                        style="color: black"
                        v-if="['外规类指标'].includes(data.label) || (data.level == 3 && data.parentId != 2)"
                        @click.stop="clickIconPlus(data)"
                    ></el-button>
                    <!-- 记录 -->
                    <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-time"
                        style="color: black; right: 2px; top: 5px; position: absolute"
                        v-if="data.level == 4"
                        @click.stop="clickIconTime(data)"
                    ></el-button>
                    <!-- <el-button 
                        type="text" 
                        size="mini" 
                        icon="el-icon-delete" 
                        style="color:black;right:2px;top:5px;position:absolute;" 
                        v-if="data.level == 4 && node.parent && node.parent.parent && node.parent.parent.data && node.parent.parent.data.id == '3'"
                        @click.stop="clickIconDelete(data)"
                    ></el-button> -->
                </span>
            </el-tree>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';

@Component({
    name: 'EntryStandardLibrary',
    components: {},
})
export default class EntryLeftModule extends Vue {
    @Prop() dataSource;
    @Prop() currentNodekey;
    @Prop() clauseSourceCode;
    filterText = '';
    expandedKey = [];
    defaultShowNodes = [];
    defaultProps = {
        children: 'children',
        label: 'label',
    };
    nodeMemory = '';

    mounted() {
        this.$nextTick(() => {
            this.expandedKey = ['2', '3'];
        });
    }
    // @Watch('dataSource')
    // watchExpandeKey(val1, val2) {
    //     this.$nextTick(() => {
    //         this.expandedKey = [2, 3];
    //     })
    // }
    // 树节点点击
    handleNodeClick(data, node) {
        console.log(data, node, 'node');
        this.$emit('handleNodeClick', data, node);
    }
    clickIconEdit(data) {
        this.$emit('emitIconEdit', data);
    }
    clickIconEditOutline(data) {
        this.$emit('emitIconEditOutline', data);
    }
    clickIconPlus(data) {
        this.nodeMemory = data.id;
        this.$emit('emitIconPlus', data);
    }
    clickIconTime(data) {
        this.$emit('emitIconTime', data);
    }
    // 删除节点
    clickIconDelete(data) {
        this.$emit('emitIconDelete', data);
    }
    // 树节点过滤搜索
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    }
    @Watch('filterText')
    handleFilterText(val) {
        (this.$refs.tree as any).filter(val);
    }
    setStyle(value) {
        if (value == 2) {
            return { background: '#d2e8ff' };
        } else if (value == 4) {
            return { background: '#ecf5ff', width: '180px' };
        }
    }
    // 树节点展开
    handleNodeExpand(data) {
        // 保存当前展开的节点
        let flag = false;
        this.expandedKey.some(item => {
            if (item === data.id) {
                // 判断当前节点是否存在， 存在不做处理
                flag = true;
                return true;
            }
        });
        if (!flag) {
            // 不存在则存到数组里
            this.expandedKey.push(data.id);
        }
    }
    // 树节点关闭
    handleNodeCollapse(data) {
        if (data.id == '1') {
            return;
        }

        // 删除当前关闭的节点
        this.expandedKey.some((item, i) => {
            if (item === data.id) {
                this.expandedKey.splice(i, 1);
            }
        });
        this.removeChildrenIds(data); // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
    }
    // 删除树子节点
    removeChildrenIds(data) {
        const ts = this;
        if (data.children) {
            data.children.forEach(function (item) {
                const index = ts.expandedKey.indexOf(item.id);
                if (index > 0) {
                    ts.expandedKey.splice(index, 1);
                }
                ts.removeChildrenIds(item);
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.leftModule {
    height: 100%;
    width: 300px;
    background: #ffffff;
    border-right: 1px solid #e5e5e5;
    .title {
        height: 42px;
        line-height: 42px;
    }
    .tree {
        height: 98%;
        width: 100%;
        .filter-tree {
            height: calc(100% - 60px);
            width: 100%;
            overflow: auto;
            .custom-tree-node {
                position: relative;
                .node-name {
                    display: inline-block;
                    max-width: 120px !important;
                    height: 20px;
                    line-height: 20px;
                    padding: 3px 4px;
                    overflow: hidden !important;
                    white-space: nowrap !important;
                    text-overflow: ellipsis !important;
                }
            }
        }
    }
}
/deep/ .el-tree-node__content {
    margin-top: 5px !important;
}
/deep/ .el-button:hover {
    color: #409eff !important;
    transform: scale(1.5) !important;
}
</style>
